<template>
    <div>
        <div class="flex">
            <div class="flex-right">
                <div class="flex-right-item">
                    <navigationBarCustom customTitle="部门维护">
                        <div class="searchContent">
                            <el-input v-model="username" placeholder="请输入部门名称" size="mini" style="width: 150px; margin-right: 10px"></el-input>
                            <custom-button type="add" style="margin-right: 10px" @addClick="addTableClick"></custom-button>
                            <el-button size="mini" style="margin-right: 10px; background-color: #fc6a6e; color: #fff; border: none" @click="deleteTableAll">
                                <i class="el-icon-delete"></i> 批量删除
                            </el-button>
                        </div>
                    </navigationBarCustom>
                    <div style="margin-top: 10px">
                        <tableHeightIndex
                            :dataSource="dataSource"
                            :tableColumns="tableColumns"
                            :btnList="btnList"
                            :pageSize="pageSize"
                            :pageCount="pageCount"
                            :pageNo="pageNo"
                            @pageChange="pageChange"
                            @editRow="editTableRow"
                            @viewRow="viewRow"
                            @deleteRow="deleteTableRow"
                            selection
                            :height="400"
                            @handleSelectionChange="handleTableSelectionChange"
                            @handleClickTableRow="handleTableClickTableRow"
                        ></tableHeightIndex>
                    </div>
                </div>
                <div class="flex-right-item" style="margin-top: 10px">
                    <navigationBarCustom :customTitle="customTitle">
                        <div class="searchContent">
                            <custom-button type="add" style="margin-right: 10px" @addClick="addClick"></custom-button>
                            <el-button size="mini" style="margin-right: 10px; background-color: #fc6a6e; color: #fff; border: none" @click="deleteAll">
                                <i class="el-icon-delete"></i> 批量删除
                            </el-button>
                        </div>
                    </navigationBarCustom>
                    <tableHeightIndex
                        :dataSource="dataSourceDown"
                        :tableColumns="tableColumnsDown"
                        :btnList="btnListDown"
                        :pageSize="pageSize"
                        :pageCount="pageCount"
                        :pageNo="pageNo"
                        @pageChange="pageChange"
                        @editRow="editRow"
                        @viewRow="viewRow"
                        @deleteRow="deleteRow"
                        :height="secondTableHeight"
                        selection
                        @handleSelectionChange="handleSelectionChange"
                    ></tableHeightIndex>
                </div>
            </div>
        </div>
        <div v-if="dialogShow">
            <custom-dialog :title="dialogTitle" size="large" @dialogClose="dialogClose">
                <form-index :formConfig="formConfig" @submit="tableSubmit2" :type="type" @formInputChange="formInputChange" ref="form"> </form-index>
            </custom-dialog>
        </div>

        <!-- 部门管理 -->
        <div v-if="dialogTableShow">
            <custom-dialog :title="dialogTableTitle" size="large" @dialogClose="dialogTableClose">
                <form-index :formConfig="formTableConfig" @submit="tableSubmit" :type="tableType" @formInputChange="formInputChange" ref="form"> </form-index>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import {departManageForm} from "@/assets/form/managementCenter/systemManage/departManage"
import {departOrgManageForm} from "@/assets/form/managementCenter/systemManage/departOrgManage"
import customDialog from "@/components/customComponents/customDialog"
import customButton from "@/components/customComponents/customForm/customButton"
import formIndex from "@/components/customComponents/customForm/formIndex"
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue"
import navigationBarCustom from "@/components/customComponents/managementCenter/navigationBarCustom.vue"
import {DepartOrgList, DepartOrgDownist} from "@/mockData/systemManage.js"
// import {AjaxCommon} from "@/libs/apiCommon"
import {PopupCommon} from "@/libs/popupCommon"
import {SessionCommon} from "@/libs/sessionCommon"
// import {Utility} from "@/libs/utility"
export default {
    components: {
        navigationBarCustom,
        customButton,
        customDialog,
        formIndex,
        tableHeightIndex
    },
    data() {
        return {
            inter: null,
            customTitle: "岗位维护",
            defaultProps: {
                children: "children",
                label: "label"
            },
            tableColumnsDown: [
                {
                    prop: "name",
                    label: "岗位名称"
                },
                {
                    prop: "gwbh",
                    label: "岗位编码"
                },
                {
                    prop: "remark",
                    label: "备注"
                },
                {
                    prop: "oprPerson",
                    label: "最后操作人"
                },
                {
                    prop: "oprTime",
                    label: "最后操作时间"
                }
            ],
            dataSourceDown: DepartOrgDownist,
            dialogTableShow: false,
            dialogTableTitle: "新增部门",
            curHeight: 100,
            data: [],
            yzId: "",
            secondTableHeight: document.body.clientHeight - 603,
            tableList: [
                {
                    id: "1",
                    name: "湘江新城1"
                },
                {
                    id: "2",
                    name: "湘江新城2"
                },
                {
                    id: "3",
                    name: "湘江新城3"
                }
            ],
            selectTableItem: [],
            tableItem: {},
            selectItem: [],
            username: "",
            // table 相关参数  begin
            dataSource: DepartOrgList,
            tableColumns: [
                {
                    prop: "name",
                    label: "部门名称"
                },
                {
                    prop: "jc",
                    label: "简称"
                },
                {
                    prop: "bmbh",
                    label: "部门编号"
                },
                {
                    prop: "orderIndex",
                    label: "排序号"
                },
                {
                    prop: "personNum",
                    label: "部门人数"
                },
                {
                    prop: "remark",
                    label: "备注"
                },
                {
                    prop: "oprPerson",
                    label: "最后操作人"
                },
                {
                    prop: "oprTime",
                    label: "最后操作时间"
                }
            ],
            btnList: ["edit", "delete"],
            btnListDown: ["edit", "delete"],
            pageSize: 20,
            pageCount: 100,
            pageNo: 1,
            // table 相关参数  end

            // 弹窗是否显示
            dialogShow: false,
            // 弹窗标题 (新增修改不同)
            dialogTitle: "",

            // form的配置信息
            formConfig: departOrgManageForm,
            type: "add",

            formTableConfig: departManageForm,
            tableType: "add"
        }
    },
    methods: {
        dialogTableClose() {
            this.dialogTableShow = false
        },
        getHeight() {
            this.curHeight = window.innerHeight - 146
        },
        addTableClick() {
            this.tableItem = {}

            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == "fieldName") {
                        t.filedValue = ""
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.tableType = "add"
            this.dialogTableShow = true
            this.dialogTableTitle = "新增部门"
        },
        addClick() {
            if (typeof this.tableItem.id == "undefined") {
                PopupCommon.notify("info", "请点击部门列表的一行进行选择")
                return
            }
            this.type = "add"
            this.dialogShow = true
            this.dialogTitle = "（ 部门：【" + this.tableItem.name + "】）"
        },
        tableClick(item) {
            this.tableIndex = item.Id
            this.tableItem = {}
            this.dataSourceDown = []
            this.initPage()
        },
        deleteAll() {
            if (this.selectItem.length == 0) {
                PopupCommon.notify("info", "请先勾选数据")
                return
            }
            PopupCommon.notify("success", "删除成功")
            // let self = this
            // PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
            //     .then(() => {
            //         self.selectItem.forEach((d) => {
            //             const id = d.RelationId
            //             AjaxCommon("/api/TableFieldRelation/Delete?id=" + id, "delete", {
            //                 optReason: ""
            //             }).then((res) => {
            //                 console.log(res)
            //             })
            //         })

            //         setTimeout(() => {
            //             PopupCommon.notify("success", "删除成功")
            //             self.initDownYzzd()
            //         }, 500)
            //     })
            //     .catch(() => {
            //         // 这里尽量写下，否则会报警告异常。
            //         console.log("已取消删除")
            //     })
        },
        deleteTableAll() {
            this.tableItem = {}
            if (this.selectTableItem.length == 0) {
                PopupCommon.notify("info", "请先勾选数据")
                return
            }
            // let self = this
            PopupCommon.notify("success", "删除成功")
            // PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
            //     .then(() => {
            //         self.selectTableItem.forEach((d) => {
            //             const id = d.Id
            //             AjaxCommon("/api/table/Delete?id=" + id, "delete", {
            //                 optReason: ""
            //             }).then((res) => {
            //                 console.log(res, "res................................")
            //             })
            //         })
            //         setTimeout(() => {
            //             PopupCommon.notify("success", "删除成功")
            //             self.initPage()
            //         }, 500)
            //     })
            //     .catch(() => {
            //         // 这里尽量写下，否则会报警告异常。
            //         console.log("已取消删除")
            //     })
        },

        handleSelectionChange(d) {
            this.selectItem = d
            console.log(d)
        },
        handleTableSelectionChange(d) {
            this.selectTableItem = d
        },
        handleTableClickTableRow(d) {
            this.tableItem = d
            this.customTitle = `【${d.name}】岗位维护`
            // this.initDownYzzd()
        },
        formInputChange(e) {
            // if (e.filedName == "idCard") {
            // 	const data = CardId.getInfoByCardId(e.value)
            // 	if (data) {
            // 		let newData = e.allData
            // 		newData["birthday"] = data.birthday
            // 		newData["sex"] = data.sex
            // 		this.$refs.form.changeFormValue(newData)
            // 	}
            // }
            console.log(e)
        },
        tableSubmit(d) {
            console.log(d)
            PopupCommon.notify("success", "操作成功")
            this.dialogTableClose()

            // let self = this
            // var params = `?FolderId=${this.tableIndex}&TableName=${d.FolderName}&TableType=1&description=${d.description}`
            // if (d.Id) {
            //     params += `&Id=${d.Id}`
            // }
            // console.log(d, params, self)
            // if (d.Id) {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "编辑成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // } else {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "新增成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // }
        },
        tableSubmit2(d) {
            console.log(d)
            PopupCommon.notify("success", "操作成功")
            this.dialogShow = false
            // let self = this
            // var params = `?FolderId=${this.tableIndex}&TableName=${d.FolderName}&TableType=1&description=${d.description}`
            // if (d.Id) {
            //     params += `&Id=${d.Id}`
            // }
            // console.log(d, params, self)
            // if (d.Id) {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "编辑成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // } else {
            //     AjaxCommon("/api/table" + params, "post", {})
            //         .then((res) => {
            //             if (res.data.status == 200) {
            //                 PopupCommon.notify("success", "新增成功")
            //                 self.initPage()
            //                 self.dialogTableClose()
            //             } else {
            //                 PopupCommon.notify("error", res.data.msg)
            //             }
            //         })
            //         .catch((err) => {
            //             PopupCommon.notify("error", err.message)
            //         })
            // }
        },
        dialogClose() {
            this.yzzdSelect = this.yzzdFixedSelect
            this.dialogShow = false
        },
        searchClick() {
            this.pageNo = 1
            this.initPage()
        },
        searchTableClick() {
            this.tableItem = {}
            this.pageNo = 1
            this.initPage()
        },

        resetClick() {
            this.username = ""
        },
        // 分页点击事件
        pageChange(p) {
            this.pageNo = p
            this.initPage()
        },
        editRow(d) {
            this.type = "edit"
            let formConfigItem = this.formConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == "fieldName") {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formConfig = formConfigItem
            this.dialogShow = true
            this.dialogTitle = "编辑岗位"
        },

        editTableRow(d) {
            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == "fieldName") {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.tableType = "edit"
            this.dialogTableShow = true
            this.dialogTableTitle = "编辑部门"
        },
        viewRow(d) {
            this.type = "look"
            let formConfigItem = this.formConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == "fieldName") {
                        t.filedValue = d.data[t[res]]
                    }
                })
            })
            this.formConfig = formConfigItem
            this.dialogShow = true
            this.dialogTitle = "查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
        },
        deleteRow(d) {
            console.log(d)
            PopupCommon.notify("success", "删除成功")
            // const id = d.data.RelationId
            // let self = this
            // AjaxCommon("/api/TableFieldRelation/Delete?id=" + id, "delete", {
            //     optReason: ""
            // }).then((res) => {
            //     console.log(res, "res...............")
            //     if (res.data.status == 200) {
            //         PopupCommon.notify("success", "删除成功")
            //         self.initDownYzzd()
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        deleteTableRow(d) {
            console.log(d)
            // this.tableItem = {}
            // const id = d.data.Id
            // let self = this
            // AjaxCommon("/api/table/Delete?id=" + id, "delete", {
            //     optReason: d.optReason
            // }).then((res) => {
            //     console.log(res, "res...............")
            //     if (res.data.status == 200) {
            //         PopupCommon.notify("success", "删除成功")
            //         self.initPage()
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        // 初始化事件
        initPage() {
            // // 差个搜索功能
            // let self = this
            // AjaxCommon(`/api/table?tableType=1&key=${this.tableIndex}`, "get", null).then((res) => {
            //     if (res.data.status == 200) {
            //         self.dataSource = res.data.response
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        },
        initDownYzzd() {
            console.log(this.tableItem, "this.tableItem.......")
            // // 差个搜索功能
            // let self = this
            // var params = `TableID=` + this.tableItem.Id
            // AjaxCommon(`/api/TableFieldRelation?${params}`, "get", null).then((res) => {
            //     console.log(res, "res....")
            //     if (res.data.status == 200) {
            //         self.dataSourceDown = res.data.response
            //         // 初始化赋值
            //         self.yzzdFixedSelect = res.data.response
            //         self.yzzdSelect = res.data.response
            //     } else {
            //         PopupCommon.notify("error", res.data.msg)
            //     }
            // })
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getHeight()
            this.initPage()
        })

        /*窗口自适应，关键代码*/
        window.onresize = () => {
            this.getHeight()
        }
    }
}
</script>

<style scoped>
.flex {
    display: flex;
}

.flex .flex-left {
    width: 350px;
    margin-right: 10px;
}

.flex .flex-right {
    flex: 1;
}

.flex .flex-left .navigationBar {
    height: 36px;
    line-height: 36px;
    background-color: #fff;
    margin-top: 10px;
}

.flex .flex-left .flex-tree {
    background-color: #fff;
    margin-top: 10px;
    height: calc(100vh - 148px);
    overflow-y: auto;
}

.flex .flex-left .flex-tree .delete {
    color: red;
    float: right;
    margin-top: 9px;
    cursor: pointer;
}
.flex .flex-left .flex-tree .edit {
    color: blue;
    float: right;
    margin-top: 9px;
    cursor: pointer;
    margin-right: 10px;
}
.flex .flex-left .flex-tree .tree-item {
    height: 32px;
    line-height: 32px;
    margin: 5px 10px;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
    background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
    background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
    text-align: left;
    font-size: 16px;
    color: #333;
    margin-left: 10px;
}

.flex .flex-left .navigationBar span {
    float: right;
    margin-right: 10px;
    color: #333;
    cursor: pointer;
}

.singleTable {
    margin-bottom: 20px;
}
.singleBtn {
    position: absolute;
    bottom: 8px;
    right: 9px;
}

.select {
    font-size: 14px;
    line-height: 30px;
    padding: 5px 10px;
}

.select .item {
    display: inline-block;
    padding: 0px 10px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.itemDiv {
    display: inline-block;
}
.selectMain {
    height: 515px;
}
.selectMain .selectLeft {
    width: 35%;
    float: left;
}

.selectMain .selectLeft .selectLeftWrapper {
    margin: 10px;
    border: 1px solid #ebeef5;
    padding: 10px;
    height: 478px;
    overflow-y: auto;
}

.selectMain .selectRight {
    width: 65%;
    float: left;
}
</style>
